<script setup lang="ts">
import type { UniLoadMoreStatus } from '@uni-helper/uni-ui-types'
import { getPagedActivityService } from '@/common/service/activity'
import type { Activity } from '@/common/types/activity'
import type { PagedParams } from '@/common/types/request'
import { NavigateItem, PageTitle } from '@/common/constants'
import skeleton from '@/common/skeleton/pages/activity.vue'

/**
 * 活动列表参数
 */
const activity = ref<Activity[]>([])
const { contentAreaHeight, tabBarHeight } = useLayoutInfo()
/**
 * 分页参数
 */
const pagedParams = ref<PagedParams>({
  pageNum: 1,
  pageSize: 5,
})

const loadingStatus = ref<UniLoadMoreStatus>('more')

/**
 * 总数量
 */
const total = ref<number>(0)

/**
 * 分页获取活动
 */
const getPagedActivity = async () => {
  const { data } = await getPagedActivityService(pagedParams.value)
  console.log(data)

  total.value = data.total
  if (Array.isArray(data.item)) {
    activity.value = activity.value ? activity.value.concat(data.item) : data.item
  }
}

/**
 * 最大页码值
 */
const maxPageNum = computed(() => {
  return Math.ceil(total.value / pagedParams.value.pageSize)
})

/**
 * 加载更多
 */
const onLoadMore = async () => {
  // 判断是否已超出最大页码值
  if (pagedParams.value.pageNum >= maxPageNum.value) {
    loadingStatus.value = 'noMore'
    return showSimpleToast(NO_MORE_DATA)
  }

  // 让页码自增加一
  pagedParams.value.pageNum++

  loadingStatus.value = 'loading'
  await getPagedActivity()
  loadingStatus.value = 'more'
}

onLoad(() => {
  getPagedActivity()
})
</script>

<template>
  <!-- 自定义头部组件 -->
  <hope-nav-bar :title="PageTitle.ACTIVITY" />
  <!-- 滚动视图区域 -->
  <scroll-view
    scroll-y :style="{
      height: `${contentAreaHeight - tabBarHeight}px`,
    }" @scrolltolower="onLoadMore"
  >
    <!-- 顶部操作栏 包括 搜索栏以及导航项 -->
    <hope-top-actions :navigate-item="NavigateItem.MY_ACTIVITY" />

    <view class="activity-container">
      <uni-title type="h3" title="我的志愿" align="center" />
      <template v-if="activity.length > 0">
        <!-- 志愿者活动 列表 -->
        <view v-for="item in activity" :key="item.id" class="activity-item">
          <hope-activity :activity="item" button-size="sm" :info="true" />
        </view>
        <uni-load-more icon-type="circle" :status="loadingStatus" />
      </template>
      <template v-else>
        <view v-for="item in 5" :key="item" class="activity-item">
          <skeleton />
        </view>
      </template>
    </view>
  </scroll-view>
</template>

<style scoped lang="scss">
.activity {
  &-container {
    display: flex;
    gap: 20rpx;
    flex-direction: column;
    margin-top: 30rpx;
    padding: 30rpx;

    background-color: $color-white;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;

    &-title {
      text-align: center;

    }
  }

  &-item {
    height: 300rpx;
    margin-bottom: 30rpx;
  }
}
</style>
